<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <title>Koala Application</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .splashscreen, #KoalaCanvas {
            width: 100vw;
            height: 100vh;
        }

        .splashscreen {
            --logo-size: min(60vmin, 400px);
            background: #e9eaff;
            user-select: none;
            -webkit-user-drag: none;
        }

        .splashscreen-content {
            width: var(--logo-size);
            position: absolute;
            top: calc(50% - var(--logo-size) / 2 - 150px);
            left: calc(50% - var(--logo-size) / 2);
        }

        .splashscreen-text {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            color: #3b3b3b;
            font-size: 34px;
            font-weight: 200;
            text-align: center;
            margin: 0;
        }

        .app-logo {
            width: var(--logo-size);
            height: var(--logo-size);
            background: url(images/koala-start-logo.png) center/cover;
            background-position: center 100%;
            background-size: 100%;
            background-repeat: no-repeat;
        }

        #KoalaCanvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        <div id="ArkoalaCanvas" width="1000px" height="600px"></canvas>
    </div>
    <script src="./js/arkoala-web.js"></script>
    <script>
        function sendClick(control, target, status, x, y) {
            control.sendMessage("arkoala.press", {
                kind: 1,
                nodeId: target,
                x: x,
                y: y,
                status: status
            })
        }
        Koala.startArkoalaWeb("ArkoalaCanvas")
            .then((control) => {
                    // Send click to component 1003 which is Button.
                    setTimeout(() => sendClick(control, 1003, 1, 10, 10), 1000)
                    setTimeout(() => sendClick(control, 1003, 1, 10, 10), 2000)
            })
    </script>
</body>
</html>
